<template>
  <s-layout class="set-wrap" title="门店介绍" :bgStyle="{ color: '#f7f7f7' }">
    <!-- <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无常见问题" icon="/static/collect-empty.png" /> -->
    <view class="flex flex-col">
      <view class="aspect-square size-full bg-gray-100">
        <image :src="state.store.image" mode="aspectFill" class="size-full" />
      </view>
      <view class="flex flex-col gap-4 p-4">
        <view class="flex overflow-hidden flex-col gap-2 p-4 bg-white rounded-lg">
          <view class="flex justify-between items-center w-full">
            <view class="flex flex-col gap-1">
              <view class="text-[1.25rem] text-[#111111]">{{ state.store.name }}</view>
              <u-rate :count="state.count" v-model="state.store.score" readonly></u-rate>
            </view>
            <view class="flex flex-col gap-1 justify-center items-center" @click="makeAPhoneCall(state.store.mobile)">
              <image src="/static/20250829110959.png" mode="scaleToFill" class="size-7" />
              <view class="text-[.5625rem] text-[#777777]">电话</view>
            </view>
          </view>
          <u-line />
          <view class="flex justify-between items-center w-full" @click="openTheMap(state.store.lat, state.store.lng)">
            <view class="flex flex-col gap-1">
              <view class="text-[1rem] text-[#191919] line-clamp-1">{{ state.store.address }}</view>
              <view class="text-[.8125rem] text-[#777777] line-clamp-1">距你直线{{ state.store.juli }}公里 </view>
            </view>
            <view class="flex flex-col flex-none gap-1 justify-center items-center">
              <image src="/static/20250829110954.png" mode="scaleToFill" class="size-7" />
              <view class="text-[.5625rem] text-[#777777]">地址</view>
            </view>
          </view>
        </view>
        <!-- 商家展示 -->
        <view class="flex overflow-hidden flex-col gap-2 p-4 bg-white rounded-lg">
          <view class="flex justify-between items-center">
            <view class="flex gap-2 items-center">
              <image src="/static/20250829111748.png" class="size-5" mode="scaleToFill" />
              <view class="text-[1.125rem] text-[#111111]">商家展示</view>
            </view>
          </view>
          <u-tabs :list="state.classification" key-name="name" @change="changeTab" :current="state.categoryCurrent"></u-tabs>
          <!-- 图片 -->
          <view class="grid grid-cols-4 gap-2" v-if="state.categoryCurrent == 0">
            <view
              class="aspect-square overflow-hidden col-span-2 bg-gray-100 rounded-lg"
              v-for="(i, k) in state.store.images"
              :key="k"
              @click="multiplePreviews(i)"
            >
              <image :src="i" mode="scaleToFill" class="size-full" />
            </view>
          </view>
          <!-- 视频 -->
          <view class="grid grid-cols-4 gap-2" v-if="state.categoryCurrent == 1">
            <!-- videos -->
            <view class="aspect-square overflow-hidden col-span-4 bg-gray-100 rounded-lg" v-for="(i, k) in state.store.videos" :key="k">
              <video :src="i" class="size-full" controls autoplay loop></video>
            </view>
          </view>
        </view>

        <!-- 评价 -->
        <view class="flex overflow-hidden flex-col gap-4 p-4 bg-white rounded-lg" v-if="state.commentList.length">
          <view class="flex justify-between items-center">
            <view class="flex gap-2 items-center">
              <image src="/static/20250829111748.png" class="size-5" mode="scaleToFill" />
              <view class="text-[1.125rem] text-[#111111]">网友评价</view>
              <view class="text-[.875rem] text-[#777777]">（{{ state.commentList.length }}条）</view>
            </view>
            <view class="flex items-center" @click="toAllComments">
              <view class="text-[.875rem] text-[#A1A1A1]">查看全部评价</view>
            </view>
          </view>
          <view class="flex flex-col gap-4">
            <view class="flex flex-col gap-3" v-for="(i, k) in state.commentList" :key="k">
              <view class="flex justify-between items-center">
                <view class="flex gap-2 items-center">
                  <view class="w-[2.25rem] h-[2.25rem] rounded-full bg-gray-200 overflow-hidden">
                    <image :src="i.user.avatar" class="size-full" mode="scaleToFill" />
                  </view>
                  <view class="flex flex-col justify-between">
                    <view class="text-[.9375rem] text-[#1A1A1A]">{{ i.user.nickname }}</view>
                    <u-rate count="5" v-model="i.score" readonly></u-rate>
                  </view>
                </view>
                <view class="text-[.75rem] text-[#BABABA]">{{ i.createtime }}</view>
              </view>
              <view class="text-[.9375rem] text-[#1A1A1A]">
                {{ i.content }}
              </view>
              <view class="grid grid-cols-3 gap-2 w-full">
                <view
                  class="aspect-square overflow-hidden col-span-1 bg-gray-200 rounded-lg"
                  v-for="(ii, kk) in i.images"
                  :key="kk"
                  @click="previewImage(ii)"
                >
                  <image :src="ii" mode="scaleToFill" class="size-full" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="h-[6.25rem]"></view>
    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white">
      <view class="overflow-hidden py-3 w-full rounded-lg bg-[#0788C8] grid place-items-center" @click="toWriteComment">
        <view class="font-medium text-[1rem] text-[#FFFFFF]"> 写评论 </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  import { ref } from 'vue';
  const state = ref({
    categoryCurrent: 0,
    classification: [
      {
        name: '图片',
      },
      {
        name: '视频',
      },
    ],
    rateValue: 1,
    count: 5,
    commentList: [], // 评论列表
    store: {}, // 店铺详情
    loading: true,
    id: '',
  });

  onLoad((e) => {
    state.value.id = e.id;
  });
  onShow((e) => {
    storeShow(); // 店铺详情
    storeEvaluateList(); // 评论列表
  });
  function storeShow(params) {
    sheep.$api.yy
      .storeShow({
        id: state.value.id,
      })
      .then((res) => {
        state.value.store = res.data;
      });
  }
  function storeEvaluateList() {
    sheep.$api.yy
      .storeEvaluateList({
        id: state.value.id,
      })
      .then((res) => {
        console.log('🚀 ~ storeEvaluateList ~ res:', res);
        state.value.commentList = res.data.data;
      });
  }

  function toAllComments() {
    uni.navigateTo({
      url: '/pages/yy/allComments?id=' + state.value.id,
    });
  }
  function toWriteComment() {
    let obj = {
      id: state.value.id || 4,
      name: state.value.store.name,
      image: state.value.store.image,
    };
    uni.navigateTo({
      url: '/pages/yy/comment?obj=' + encodeURIComponent(JSON.stringify(obj)),
    });
  }
  function makeAPhoneCall(e) {
    uni.makePhoneCall({
      phoneNumber: e + '',
    });
  }
  function openTheMap(latitude, longitude) {
    console.log('🚀 ~ openTheMap ~ longitude:', longitude);
    console.log('🚀 ~ openTheMap ~ latitude:', latitude);
    uni.openLocation({
      latitude: latitude - 0,
      longitude: longitude - 0,
    });
  }
  function changeTab(item) {
    state.value.categoryCurrent = item.index;
  }
  function previewImage(ii) {
    // 预览图片
    uni.previewImage({
      urls: [ii], // 需要预览的图片链接列表
      current: ii, // 当前显示图片的链接
    });
  }
  function multiplePreviews(i) {
    // 预览多张图片
    uni.previewImage({
      urls: state.value.store.images, // 需要预览的图片链接列表
      current: i, // 当前显示图片的链接
    });
  }
</script>

<style lang="scss" scoped></style>
